<template>
  <div class="left1">
      <div class="small-title">
          <span>土壤养分</span>
      </div>
      <div class="crop-rank" ref="leftOneEcharts"></div>
</div>

</template>

<script setup>
import { onMounted,onBeforeUnmount, ref} from 'vue'
import * as echarts from 'echarts'
import Color from 'element-plus/es/components/color-picker/src/color';

const leftOneEcharts = ref(null);
onMounted(() => {
  const chart = echarts.init(leftOneEcharts.value);

  const option = {
  // title: {
  //   text: '土壤养分'
  // },
  tooltip: {},
    dataset: {
      dimensions: ['product', '第一产业', '第二产业', '第三产业'],

      source: [
        {product: '2019', 第一产业: 190, 第二产业: 100, 第三产业: 550},
        {product: '2020', 第一产业: 930, 第二产业: 100, 第三产业: 1100},
        {product: '2021', 第一产业: 920, 第二产业: 100, 第三产业: 1100},
        {product: '2022', 第一产业: 910, 第二产业: 100, 第三产业: 1100}
      ]
    },
  legend: {
      data: ['第一产业','第二产业','第三产业'], //图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name
      left:'5%',
      icon:"rect",
      textStyle: {
        color: '#fff'
      },
    },
    grid: {/*直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。*/
      left: '5%',//grid 组件离容器距离
      right: '20%',
      bottom: '10%',
      containLabel: true, //grid 区域是否包含坐标轴的刻度标签。
    },

    xAxis: [//直角坐标系 grid 中的 x 轴
      {
        type: 'category',//坐标轴类型，
        boundaryGap: ['50%', '20%'],    // 坐标轴两边留白策略
        data: ['2019','2020','2021','2022'],
        // splitNumber: 4,    // 坐标轴的分割段数（预估值）
        axisLabel: {
          // interval:0,
          // margin:10,
          fontSize: '10',    // 文字字体大小
          color: '#fff'//给x轴的数字上白色
        }
      }
    ],
    yAxis: {

      name: '含量（毫克/公斤）',
         min: 0,
           max: 1200,
          interval: 200,
      nameTextStyle: {
        color: 'white'
      },
      type: 'value',
      axisLabel: {
        color: 'white'
      },

            axisLine: {
              show: true, // Y轴
 
            },
            splitLine: { // 表格里面Y轴线条
              show: true
            }
          
    },
    series: [
      {type: 'bar',
      barWidth: 10,
					//设置柱状图渐变颜色
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
								offset: 0.3,
								color: "#7FFFAA" // 0% 处的颜色
							}, {
								offset: 0.6,
								color: "#E1FFFF" // 60% 处的颜色
							}, {
								offset: 0.9,
								color: "#2E8B57" // 100% 处的颜色
							}], false)
						}
					},
        }, 
        {type: 'bar',
        barWidth: 10,
					//设置柱状图渐变颜色
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
								offset: 0,
								color: "#1268f3" // 0% 处的颜色
							}, {
								offset: 0.6,
								color: "#08a4fa" // 60% 处的颜色
							}, {
								offset: 1,
								color: "#01ccfe" // 100% 处的颜色
							}], false)
						}
					},
      }, 
      {type: 'bar',
      barWidth: 10,
					//设置柱状图渐变颜色
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
								offset: 0,
								color: "#00BFFF" // 0% 处的颜色
							}, {
								offset: 0.6,
								color: "#87CEFA" // 60% 处的颜色
							}, {
								offset: 1,
								color: "	#00008B" // 100% 处的颜色
							}], false)
						}
					},
    }]
  };

chart.setOption(option);
})

</script>
<style lang="scss" scoped>
.left1 {
  width: 23%;
  height: calc(100% / 3 - 57px);
  background-image: url("@/assets/img/backg1.png");
  background-size: 100% 100%;
  position: fixed;
  top: 94px;
  float: left;

        .small-title {
            left: 5%;
            position: relative;
              span {
              color:rgb(157, 211, 236);
              position: relative;
 
              }
      }
      .crop-rank {
      width: 100%;
      height: 100%;
      }
  } 
</style>

